<template>
  <div style="padding: 16px;">
    <a-space style="margin-bottom: 12px;">
      <a-input v-model:value="query.roomId" placeholder="按房间ID过滤" style="width: 200px;" />
      <a-button type="primary" @click="loadData">查询</a-button>
      <a-button @click="openEdit()">新增</a-button>
    </a-space>
    <a-table :data-source="list" row-key="id" :pagination="false" size="small">
      <a-table-column title="ID" dataIndex="id" key="id" width="80" />
      <a-table-column title="房间ID" dataIndex="roomId" key="roomId" width="100" />
      <a-table-column title="开始日期" dataIndex="startDate" key="startDate" />
      <a-table-column title="结束日期" dataIndex="endDate" key="endDate" />
      <a-table-column title="价格" dataIndex="price" key="price" />
      <a-table-column title="操作" key="action" :customRender="actionRender" />
    </a-table>

    <a-pagination :current="page" :pageSize="size" :total="total"
                  @change="(p)=>{page=p;loadData()}" style="margin-top:12px;" />

    <a-modal v-model:open="visible" :title="form.id?'编辑季节价':'新增季节价'" @ok="save" @cancel="()=>visible=false">
      <a-form layout="vertical">
        <a-form-item label="房间ID"><a-input v-model:value="form.roomId" /></a-form-item>
        <a-form-item label="开始日期"><a-date-picker v-model:value="form.startDate" /></a-form-item>
        <a-form-item label="结束日期"><a-date-picker v-model:value="form.endDate" /></a-form-item>
        <a-form-item label="价格"><a-input-number v-model:value="form.price" :min="0" :step="1" /></a-form-item>
      </a-form>
    </a-modal>
  </div>
  
</template>

<script setup>
import { ref, onMounted, h } from 'vue'
import { seasonPriceAPI } from '@/api/seasonPrice'

const query = ref({ roomId: '' })
const list = ref([])
const total = ref(0)
const page = ref(1)
const size = ref(10)

const visible = ref(false)
const form = ref({ id: null, roomId: '', startDate: '', endDate: '', price: 0 })

const loadData = async () => {
  const res = await seasonPriceAPI.list(query.value.roomId || undefined, page.value, size.value)
  const payload = res.data?.data || res.data || {}
  list.value = payload.list || []
  total.value = payload.total || 0
}

onMounted(() => { loadData() })

const openEdit = (row) => {
  visible.value = true
  form.value = row ? { ...row } : { id: null, roomId: '', startDate: '', endDate: '', price: 0 }
}

const save = async () => {
  const data = { ...form.value }
  if (data.id) await seasonPriceAPI.update(data)
  else await seasonPriceAPI.create(data)
  visible.value = false
  loadData()
}

const remove = async (id) => {
  await seasonPriceAPI.remove(id)
  loadData()
}

const actionRender = ({ record }) => {
  return h('div', {}, [
    h('a', { style: 'margin-right:8px;', onClick: () => openEdit(record) }, '编辑'),
    h('a', { style: 'color:#e53935;', onClick: () => remove(record.id) }, '删除')
  ])
}
</script>

<style scoped>
</style>


